<template>
  <div>
    <template v-for="(item,index) in list">
      <!--        判断是否显示-->
      <template v-if="item.meta.isShow">
        <!--          判断是否有子元素-->
        <template v-if="item.children">
          <!--            有的话渲染成sub-menu-->
          <el-submenu :index="item.path" :key="index">
            <template #title>
              <i :class="item.meta.icon"></i>
              <span>{{ item.meta.title }}</span>
            </template>
            <sub-menu-item :list="item.children"></sub-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <!--           没有的话是menu-item-->
          <item-view :path="item.path" :key="item.path" :icon="item.meta.icon" :title="item.meta.title"/>
        </template>
      </template>
    </template>

  </div>

</template>

<script>
import ItemView from '@/views/aside/menu/ItemView.vue'

export default {
  name: 'SubMenuItem',
  components: { ItemView },
  props: {
    list: {
      type: Array,
      require: true
    }
  }
}
</script>

<style scoped>

</style>
